<template>
    <div id="admin">
        <div class="contain" style="height: 10vh; justify-content: center;">{{ "欢迎您，尊敬的管理员" + usr.name }}</div>
        <div class="contain" style="height: 69vh;" v-if="isAdmin">
            <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
                <nut-collapse-item :title="title1" :name="1">
                    <div style="height: 62vh; overflow: scroll;">
                        <nut-collapse v-model:active="activeName2" :accordion="true">
                            <div @click="addNewUser()" v-if="plusShow" style="margin-top: 2vh"><nut-icon font-class-name="iconfont" class-prefix="icon" name="zengjia" size="20"/></div>
                            <div v-for="user in userList" :key="user.id">
                                <div class="item">
                                    <nut-icon name="issue" style="margin: 0.5vh;" :color="colorState(user)"></nut-icon>
                                    <nut-collapse-item :title="user.id + ' ' + user.name" :name="user.id">
                                        <nut-input v-model="userTmpID" label="id" placeholder="id" v-if="user.inf == -1"/>
                                        <nut-input v-model="user.name" label="姓名" placeholder="姓名" />
                                        <nut-input v-model="user.password" label="密码" placeholder="密码" />
                                        <nut-input v-model="user.sex" type="digit" label="性别" placeholder="0女1男" />
                                        <nut-input v-model="user.status" type="digit" label="健康码状态" placeholder="0绿1黄2红" />
                                        <nut-input v-model="user.temperature" type="number" label="体温" placeholder="体温" />
                                        <nut-input v-model="user.role" type="digit" label="角色" placeholder="" />
                                        <nut-input v-model="user.virustest" label="核酸检测" placeholder="核酸" />
                                        <nut-input v-model="user.trip" label="行程" placeholder="行程" />
                                        <div>
                                            <nut-button type="default" style="width: 11vh; margin-right: 1vh; margin-top: 1vh;" @click="updateData(user)">保存</nut-button>
                                            <nut-button type="danger" style="width: 11vh; margin-bottom: 1vh;" @click="deleteData(user)">删除</nut-button>
                                        </div>
                                    </nut-collapse-item>
                                </div>
                                
                            </div>
                        </nut-collapse>
                    </div>
                </nut-collapse-item>
            </nut-collapse>
        </div>
        <div v-if="!isAdmin" class="contain" style="height: 20vh; justify-content: center;">您没有管理员权限！</div>
    </div>
</template>

<script>
import { ref } from "vue";
import common from '../Common.vue'
import axios from "axios";
import { Toast } from '@nutui/nutui';
import { reactive, toRefs, h } from 'vue';
import { Dialog } from '@nutui/nutui';
export default {
    props: {},
    components: {},
    setup() {
        const isAdmin = common.getLoginState().role == 3 ? true : false;
        const activeName = ref(1);
        const activeName2 = ref(0);
        const title = reactive({
            title1: '用户列表'
        })
        const plusShow = ref(true);
        const userList = ref({});
        
        const colorState = (user) => {
            if (user.status == 0) return "#4cdc71";
            else if (user.status == 1) return "#fdb927";
            else if (user.status == 2) return "#fe4d55";
            else if (user.status == 3) return "#b027ff";
            else return "#fffff";
        }
        const userTmpID = ref("-1");
        axios
            .post(common.apiUrl + "/api/findAll", null)
            .then((res) => { 
                userList.value = res.data;
                // console.log(res);
            });
        // 获取用户信息
        const usr = ref({});
        axios
            .post(common.apiUrl + "/api/findById", null, {params: {
                id: common.getLoginState().id
            }})
            .then((res) => {
                usr.value = res.data
            });
        return {
            isAdmin,
            activeName,
            activeName2,
            userList,
            userTmpID,
            plusShow,
            usr,
            ...toRefs(title),
            colorState
        };
    },
    mounted() {
    },
    methods: {
        addNewUser: function() {
            this.userList.unshift({
                name: 'new_user',
                id: "-1",
                inf: -1 // -1为标志，正在添加用户
            })
            this.plusShow = false;
        },
        updateData: function(user) {
            // 检查是否有空数据
            for (let key in user) {
                if (user[key] == undefined || user[key] == "") {
                Toast.fail("每一项都为必填项！");
                return;
                }
            }
            if (user.inf == -1) {
                // 设置新id
                user.id = this.userTmpID;
                // 添加新用户
                axios
                    .post(common.apiUrl + "/api/adminRegister", user)
                    .then((res) => { 
                        Toast.text(res.data.msg);
                        if (res.data.state) {
                            // 删除inf字段
                            delete user.inf;
                            
                            this.userTmpID = "-1"
                        } else {
                            this.userList.shift();
                        }
                        // 添加完成后，无论是否新增，都让plus按钮显现
                        this.plusShow = true;
                        // console.log(res);
                    });
            } else {
                axios
                    .post(common.apiUrl + "/api/update", user)
                    .then((res) => { 
                        Toast.text(res.data.msg);
                        // console.log(res);
                    });
            }
            
        },
        deleteData: function(user) {
            if (user.id == common.getLoginState().id) {
                Toast.fail('请不要删除自己');
                return;
            }

            // 弹出框回调
            const onCancel = () => {
                console.log('event cancel');
            };
            const onOk = () => {
                axios
                    .post(common.apiUrl + "/api/delete", null, {params: { id: user.id }})
                    .then((res) => { 
                        Toast.text(res.data.msg);
                        axios
                            .post(common.apiUrl + "/api/findAll", null)
                            .then((res) => { 
                                this.userList = res.data;
                                // console.log(res);
                            });
                        // console.log(res);
                    });
            };
            Dialog({
                    title: '温馨提示',
                    content: '您真的要删除该项目吗？',
                    onCancel,
                    onOk
                });
        }
    }
};
</script>

<style>
    body {
        background-color: rgb(165, 126, 255);
    }
    #admin {
        width: 100%;
        height: 85;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .contain {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 80%;
        padding: 0px 2rem 0px 2rem;
        background-color: #ffffff;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        box-shadow: 0px 1px 5px rgba(48, 48, 48, 0.5);
        margin-top: 2vh;
    }
    .item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
</style>